<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/include/head.jsp" %>
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <%@ include file="/WEB-INF/include/menu.jsp" %>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--search start-->

            <!--search end-->

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge">5</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">You have 5 Mails </h5>
                            <ul class="dropdown-list normal-list">
                                <li class="new">
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user1.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">John Doe <span
                                                  class="badge badge-success">new</span></span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user2.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jonathan Smith</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user3.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jane Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user4.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Mark Henry</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user5.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="new"><a href="">Read All Mails</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="images/photos/user-avatar.png" alt=""/>
                            John Doe
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">

                            <li><a href="#"><i class="fa fa-cog"></i> 修改密码 </a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> 退出</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->
        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                修改园区
            </h3>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <div class="panel-body " style="min-height: 725px">
                            <div class="form">
                                <form action="" class="form-horizontal cmxform form-horizontal adminex-form"
                                      id="editForm" onsubmit="return false;">
                                    <input type="hidden" name="id" id="id" value="${farmPark.id}" />
                                    <div class="form-group">
                                        <label for="parkNo" class="control-label col-md-1">园区编号</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="parkNo" name="parkNo" value="${farmPark.parkNo}" readonly maxlength="20" type="text"
                                                   class="form-control"
                                                   placeholder="请输入园区编号">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="parkName" class="control-label col-md-1">园区名称</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="parkName" name="parkName" value="${farmPark.parkName}"  maxlength="50" type="text"
                                                   class="form-control"
                                                   placeholder="请输入园区名称">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="parkAddress" class="control-label col-md-1">园区地址</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="parkAddress" name="parkAddress" value="${farmPark.parkAddress}"  type="text" maxlength="100"
                                                   class="form-control"
                                                   placeholder="请输入园区地址">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="parkAddress" class="control-label col-md-1">园区位置</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input type="text" class="form-control pull-left" value="${farmPark.lng}" readonly="readonly" name="lng" style="width:100px;"/>
                                            <span class="pull-left">&nbsp;</span>
                                            <input type="text" style="width:100px;" class="form-control pull-left" value="${farmPark.lat}"  name="lat" readonly="readonly"/>
                                            <span class="pull-left">&nbsp;</span>
                                            <button type="button" id="showMap" class="btn btn-info pull-left">显示地图</button>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="contactPerson" class="control-label col-md-1">联系人</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="contactPerson" name="contactPerson" type="text" value="${farmPark.contactPerson}" maxlength="20"
                                                   class="form-control"
                                                   placeholder="请输入联系人">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone" class="control-label col-md-1">联系电话</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="phone" name="phone" type="text" value="${farmPark.phone}" maxlength="15"
                                                   class="form-control"
                                                   placeholder="请输入联系电话">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mobilePhone" class="control-label col-md-1">手机号码</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="mobilePhone" name="mobilePhone" value="${farmPark.mobilePhone}"  type="text" maxlength="15"
                                                   class="form-control"
                                                   placeholder="请输入手机号码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="email" class="control-label col-md-1">Email</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="email" name="email" type="text" value="${farmPark.email}" maxlength="60"
                                                   class="form-control"
                                                   placeholder="请输入email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="control-label col-md-1">备注</label>
                                        <div class="col-md-4 col-xs-11">
                                            <textarea id="remark" class="form-control" style="height: 100px;"
                                                      name="remark" maxlength="255" placeholder="请输入备注信息">${farmPark.remark}</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-6 col-xs-11">
                                            <button class="btn btn-primary" type="submit" style="margin-left: 38%">
                                                提交
                                            </button>
                                        </div>
                                        <div class="col-md-4 col-xs-11"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!-- modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="mapModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">选择园区位置</h4>
                    </div>
                    <div class="modal-body">
                        <div id="map" style="width:550px;height:325px">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-warning" onclick="getLngLat()"> 选择</button>
                    </div>
                </div>
            </div>
        </div>
        <!--body wrapper end-->
        <!--footer section start-->
        <%@ include file="/WEB-INF/include/footer.jsp" %>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<%@ include file="/WEB-INF/include/js.jsp" %>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=027e871c30139b6481e8f46682c73cb9"></script>
<script type="text/javascript">

    var marker;
    var map;

    var phoneReg = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;

    $.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = phoneReg;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");

    function getLngLat(){
        $('input[name=lng]').val(marker.getPosition().lng);
        $('input[name=lat]').val(marker.getPosition().lat);
        $('#mapModal').modal('hide');
    }


    $(function () {

        var lng = $('input[name=lng]').val()===''?116.397428:parseFloat($('input[name=lng]').val());
        var lat = $('input[name=lat]').val()===''?39.90923:parseFloat($('input[name=lat]').val());

        marker = new AMap.Marker({
            position: [lng, lat]
        });

        map = new AMap.Map('map', {
            resizeEnable: true,
            zoom:8,
            center: [lng, lat]
        });

        map.on('click', function(e){
            marker.setPosition(e.lnglat);
        });

        marker.setMap(map);


        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });

        $('#showMap').click(function(){
            $('#mapModal').modal();
        });

        $('#editForm').validate({
            rules: {
                parkName: {
                    required: true,
                    maxlength: 50
                },
                parkAddress: {
                    required: true,
                    maxlength: 100
                },
                contactPerson: {
                    required: true,
                    maxlength: 20
                },
                phone: {
                    maxlength: 15
                },
                mobilePhone: {
                    required: true,
                    isMobile: true
                },
                email: {
                    email: true,
                    maxlength: 50
                },
                remark: {
                    maxlength: 255
                }
            },
            messages: {
                parkName: {
                    required: '请输入园区名称',
                    maxlength: '园区名称最大长度为100个字符'
                },
                parkAddress: {
                    required: '主输入园区地址',
                    maxlength: '园区地址最大长度为100个字符'
                },
                contactPerson: {
                    required: '请输入园区联系人',
                    maxlength: '园区联系人最大长度为20个字符'
                },
                phone: {
                    maxlength: '联系电话最大长度为15个字符'
                },
                mobilePhone: {
                    required: '请输入手机号码',
                    isMobile: '请输入正确的手机号码'
                },
                email: {
                    email: '请输入正确的email地址',
                    maxlength: 'email地址最大长度为50个字符'
                },
                remark: {
                    maxlength: '备注最大长度为255个字符'
                }
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parent());
            },
            submitHandler: function (form) {
                var postData = {
                    id:$('#id').val(),
                    parkNo: $('#parkNo').val(),
                    parkName: $('#parkName').val(),
                    parkAddress: $('#parkAddress').val(),
                    contactPerson: $('#contactPerson').val(),
                    phone: $('#phone').val(),
                    mobilePhone: $('#mobilePhone').val(),
                    email: $('#email').val(),
                    remark: $('#remark').val(),
                    lng:$('input[name=lng]').val(),
                    lat:$('input[name=lat]').val()
                };
                utils.post({
                    url: ctx + '/admin/updateFarmPark',
                    data: postData,
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg('更新成功', {}, function () {
                                window.location.href = ctx + "/admin/farmParkList";
                            });
                        } else {
                            layer.alert(data.message);
                        }
                    }
                });
            }
        });
    });
</script>

</body>
</html>
